<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    
    <title>InfoWindow Custom Beispiel</title>
    
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" 
    	  rel="stylesheet" 
          type="text/css" />
          
    <!-- Google Maps API -->
    <script type="text/javascript" 
	 	src="http://maps.google.com/maps/api/js?v=3.5&sensor=false">
    </script> 
    
    <script type="text/javascript">
    
	  // Karte initialisieren
      function initialize() {
        var myLatlng = new google.maps.LatLng(52.5234051,13.411399);
        
		// Kartenoptionen
		var myOptions = {
          zoom: 5,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        
        // Content des Informationsfensters
        var contentString = 
            '<table class="infoWindowTable" border="0" width="400px">'+
            '<tr>'+
                '<td width="150px"><b>Firmenname</b></td>'+
                '<td>Wentz Burting KG</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '<tr>'+
                '<td><b>Ansprechpartner</b></td>'+
                '<td>Karlos Bender GmBH</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '<tr>'+
                '<td><b>Strasse</b></td>'+
                '<td>Weststr.22</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '<tr>'+
                '<td><b>Ort</b></td>'+
                '<td>66482 Zweibrücken</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '<tr>'+
                '<td><b>Telefon:</b></td>'+
                '<td>0171-26625245</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '<tr>'+
                '<td><b>Letzte Leerung</b></td>'+
                '<td>14.07.2011</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '<tr>'+
                '<td><b>Zählerstand</b></td>'+
                '<td>1553</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '</table>';
        
        // InfoWindow initialisieren
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        
        // Marker auf der Karte platzieren
        var marker = new google.maps.Marker({
            position: myLatlng, 
            map: map,
            title:"Hello World!"
        }); 
        
        // Actionlistener: Bei Klick auf Marker InfoWindow öffnen
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
        }); 
         
      }
    </script>
    
    <link href="CustomInfo.css" 
    	  rel="stylesheet" 
          type="text/css">
          
</head>


<body onload="initialize()">
	
    <!-- Kartendarstellung -->
    <div id="map_canvas">
    
    </div>
    
</body>

</html>
